<template>
  <component :is="borderData.name" v-bind="borderData.attr">
    <grid-layout :layout="layout"></grid-layout>
  </component>
</template>

<script>
import {merge} from "lodash-es"
import {type} from "@/util/util"
import layout from "./layout.vue"
export default {
  name:"box",
  components:{gridLayout:layout},
  props:['border','layout'],
  data:() => ({}),
  computed:{
    borderData(){
      const bd = this.border || 'dv-border-box-11';
      const t = type(bd);
      const name = t == 'string' ? bd : bd.name;
      const attr = t == 'object' ? {...bd} : {};
      //
      delete attr.name;
      //
      const da = {
        class:'w-100% h-100%'
      }

      return {name,attr:merge(da,attr)}
    },
    layoutData(){

      return {}
    }
  },
  method:{},
}
</script>